<template>
  <div class="agent-menu" :class="{ 'mobile-view': isMobile }">
    <div class="menu-header">
      <el-icon><List /></el-icon>
      <span>代理筛选</span>
    </div>
    
    <div class="agent-list">
      <!-- <div 
        class="agent-item" 
        :class="{ 'active': activeAgentId === null }"
        @click="handleSelectAgent(null)"
      >
        <el-icon><User /></el-icon>
        <span>全部代理</span>
      </div> -->
      
      <div 
        v-for="agent in agentList" 
        :key="agent.botId"
        class="agent-item"
        :class="{ 'active': activeAgentId === agent.botId }"
        @click="handleSelectAgent(agent.botId)"
      >
        <el-icon><Avatar /></el-icon>
        <div class="agent-info">
          <div class="agent-name">{{ agent.botUsername }}</div>
          <div class="agent-service">客服: {{ agent.customerService }}</div>
        </div>
      </div>
    
     
    </div>
    
    <div class="loading" v-if="loading">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>加载中...</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import api from "../network/api";
import { ElMessage } from "element-plus";
import { User, Avatar, Loading, List } from '@element-plus/icons-vue';
import { useWindowSize } from '@vueuse/core';

export default {
  components: { User, Avatar, Loading, List },
  props: {
    activeAgentId: {
      type: [Number, String],
      default: null
    }
  },
  emits: ['select-agent'],
  setup(props, { emit }) {
    const agentList = ref([]);
    const loading = ref(false);
    const { width: windowWidth } = useWindowSize();
    const isMobile = computed(() => windowWidth.value < 768);

    // 获取代理列表
    const fetchAgentList = () => {
      loading.value = true;
      api.user_agencyList({
        pageNum: 1,
        pageSize: 100 // 获取足够多的代理数据
      })
      .then((res) => {
        if (res.data.code === 99999 && res.data.success) {
          agentList.value = res.data.data.list;
        } else {
          ElMessage.error("获取代理列表失败");
        }
      })
      .catch((error) => {
        console.error("获取代理列表出错:", error);
        ElMessage.error("请求失败");
      })
      .finally(() => {
        loading.value = false;
      });
    };

    // 处理代理选择
    const handleSelectAgent = (agentId) => {
      emit('select-agent', agentId);
    };

    onMounted(() => {
      fetchAgentList();
    });

    return {
      agentList,
      loading,
      handleSelectAgent,
      isMobile
    };
  }
};
</script>

<style scoped lang="less">
.agent-menu {
  width: 240px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  flex-direction: column;
    
  .menu-header {
    padding: 12px 15px;
    background: #f5f7fa;
    color: #606266;
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 8px;
      font-size: 16px;
    }
  }
  
  .agent-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    height: 76.7vh;
       
    .agent-item {
        // z-index: 10;
      padding: 10px 15px;
      margin: 8px 0;
      // height: 80vh;
      display: flex;
      overflow-y: auto;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
      border-left: 3px solid transparent;
      
      &:hover {
        background: #f5f7fa;
      }
      
      &.active {
        background: #ecf5ff;
        border-left: 3px solid #409eff;
        color: #409eff;
      }
      
      .el-icon {
        margin-right: 10px;
        font-size: 18px;
        flex-shrink: 0;
      }
      
      .agent-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        
        .agent-name {
          font-weight: 500;
          line-height: 1.5;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .agent-service {
          font-size: 12px;
          color: #909399;
          line-height: 1.5;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  
  .loading {
    padding: 15px;
    text-align: center;
    color: #909399;
    font-size: 14px;
    
    .el-icon {
      margin-right: 8px;
      animation: rotating 2s linear infinite;
    }
    
    @keyframes rotating {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  }
}

/* 移动端样式 */
.agent-menu.mobile-view {
  width: 100%;
  /* 修改为自动高度 */
  height: auto;
  max-height: 300px;
  
  .menu-header {
    padding: 10px 15px;
  }
  
  .agent-list {
    max-height: 250px;
  }
}
</style>